<template>
  <q-page :class="$q.screen.xs ? '' : 'q-pa-md'">
    <q-tabs v-model="tab" dense class="text-primary bg-grey-4 q-mb-sm" active-color="white" active-bg-color="primary" indicator-color="blue-10" align="left">
      <q-tab name="list" label="数据" />
      <q-tab name="summary" label="统计汇总" />
    </q-tabs>

    <q-tab-panels v-model="tab" animated keep-alive>
      <q-tab-panel style="padding: 4px;" name="list">
        <router-view v-slot="{ Component }">
          <component :is="Component" ref="component" />
        </router-view>
      </q-tab-panel>
      <q-tab-panel style="padding: 4px;" name="summary">
        <summaryPage />
      </q-tab-panel>
    </q-tab-panels>
  </q-page>
</template>

<script>
import { defineComponent } from 'vue';
import summaryPage from './summary.vue';
import { indexPageMix } from 'src/lib/mixin.js';

export default defineComponent({
  name: 'consumerIndex',
  components: {
    summaryPage
  },
  mixins: [indexPageMix],
  data () {
    return {
      tab: 'list'
    }
  },
  created () {
    // this.initDict(['tenant']);
  }
});
</script>
